<template>
	<!-- 
	优化1：登录成功跳转首页；
	优化2：时间和城市的显示优化
	 -->
	<view>
		<!-- 顶部头像模块 -->
		<div class="top">
			<div class="avatar" @click="updateAvatar">
				<image :src="profile.avatar"></image>
			</div>
			<div class="editAvatar">点击修改头像</div>
		</div>
		<!-- 表单信息模块 -->
		<div class="userInfo">
			<form>
				<view class="uni-form-item uni-column">
					<view class="left">账号</view>
					<view class="right">
						<text>{{form.account}}</text>
					</view>
				</view>
				<!-- 昵称 -->
				<view class="uni-form-item uni-column">
					<view class="left">昵称</view>
					<view class="right">
						<input type="text" v-model="form.nickname"></input>
					</view>
				</view>
				<!-- 性别 -->
				<view class="uni-form-item uni-column">
					<view class="left">性别</view>
					<view class="right">
						<radio-group name="radio" @change="radioChange">
							<label>
								<!-- :checked="form.gender==='女'" -->
								<!-- :value="form.gender" -->
								<radio value="男" color="#27ba9b" :checked="form.gender==='男'" /><text
									class="male">男</text>
							</label>
							<label>
								<radio value="女" color="#27ba9b" :checked="form.gender==='女'" /><text>女</text>
							</label>
						</radio-group>
					</view>
				</view>
				<!-- 出生日期 -->
				<view class="uni-form-item uni-column datePicker">
					<view class="left">出生日期</view>
					<view class="right">
						<picker class="text" mode="date" :value="form.birthday" start="1900-01" end="2023-05"
							@change="DateChange">
							<view class="picker">
								{{form.birthday?form.birthday:'请选择出生日期'}}
							</view>
						</picker>
					</view>
				</view>
				<!-- 城市 -->
				<view class="uni-form-item uni-column">
					<view class="left">城市</view>
					<view class="right">
						<picker class="text" mode="region" :value="defaultIndex" @change="bindPickerChange">
							<view class="picker">
								{{form.fullLocation?form.fullLocation:'请选择城市'}}
							</view>
						</picker>
					</view>
				</view>
				<!-- 职业-->
				<view class="uni-form-item uni-column">
					<view class="left">职业</view>
					<view class="right">
						<input type="text" v-model="form.profession"></input>
					</view>
				</view>
			</form>
		</div>
		<!-- 提交按钮 -->
		<button class="editForm" @click="editForm">保存</button>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		uploadAvatar,
		getMemberProfile,
		updateMemberProfile
	} from '@/api/user.js'
	export default {
		data() {
			return {
				form: {
					account: '',
					avatar: '',
					birthday: '',
					fullLocation: '',
					gender: '',
					nickname: '',
					profession: ''
				},
				code: [], //省市区的code码
				defaultIndex: [], //省市区的默认索引
			}
		},
		computed: {
			...mapGetters(['token', 'profile']),
		},
		onLoad() {
			// 1:获取个人信息
			this.getMemberProfile()
			// this.dataShow()
		},
		methods: {
			...mapMutations('user', ['setProfile']),
			// 1:获取个人信息
			async getMemberProfile() {
				const {
					result
				} = await getMemberProfile()
				this.form = result
				this.defaultIndex = this.form.fullLocation.split(' ')
				this.defaultIndex = this.form.fullLocation.split(' ')
			},
			// 2:出生日期选择
			DateChange(e) {
				this.form.birthday = e.detail.value
			},
			// 省市区回填函数
			// dataShow() {
			// 	const area = this.profile.fullLocation.split(' ')
			// 	// 省
			// 	const obj = areas.find(item => item.name === area[0])
			// 	const i1 = areas.findIndex(item => item.name === area[0])
			// 	this.defaultIndex.push(i1)
			// 	// 市
			// 	const obj1 = obj.areas.find(item => item.name === area[1])
			// 	const i2 = obj.areas.findIndex(item => item.name === area[1])
			// 	this.defaultIndex.push(i2)
			// 	// 区
			// 	const obj2 = obj1.areas.find(item => item.name === area[2])
			// 	const i3 = obj1.areas.findIndex(item => item.name === area[2])
			// 	this.defaultIndex.push(i3 )
			// 	console.log('defaultIndex', this.defaultIndex)
			// },
			// 3:省市区级联,获取选择的地区
			bindPickerChange(e) {
				this.defaultIndex = []
				// 省市区选择操作
				const {
					code,
					value
				} = e.detail
				this.code = code
				this.form.fullLocation = value.join(' ')
				this.form.provinceCode = code[0]
				this.form.cityCode = code[1]
				this.form.countyCode = code[2]
				// 修改的回填
				this.defaultIndex = this.form.fullLocation.split(' ')
				// const area = this.form.fullLocation.split(' ')
				// // 省
				// const obj = areas.find(item => item.name === area[0])
				// const i1 = areas.findIndex(item => item.name === area[0])
				// this.defaultIndex.push(i1)
				// // 市
				// const obj1 = obj.areas.find(item => item.name === area[1])
				// const i2 = obj.areas.findIndex(item => item.name === area[1])
				// this.defaultIndex.push(i2)
				// // 区
				// const obj2 = obj1.areas.find(item => item.name === area[2])
				// const i3 = obj1.areas.findIndex(item => item.name === area[2])
				// this.defaultIndex.push(i3)
				// console.log('defaultIndex', this.defaultIndex)
			},
			// 4:修改用户信息
			async editForm() {
				const {
					result
				} = await updateMemberProfile(this.form)
				this.setProfile(result)
				uni.showToast({
					title: '信息更新成功啦！',
					icon: 'success',
					duration: 1500
				})
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			// 5:上传头像
			async updateAvatar() {
				const [
					err,
					succ
				] = await uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
				})
				const imgURL = succ.tempFilePaths[0]
				uni.showLoading({
					title: '图片上传中...'
				})
				const [error, success] = await uni.uploadFile({
					filePath: imgURL, //要上传文件资源的路径
					name: 'file',
					url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/member/profile/avatar', //开发者服务器地址
					header: {
						'Authorization': 'Bearer ' + this.token,
						'content-type': 'multipart/form-data'
					}
				})
				const newAvatar = JSON.parse(success.data).result.avatar
				this.setProfile({
					...this.profile,
					avatar: newAvatar
				})
				uni.hideLoading()
				uni.showToast({
					title: '头像更新成功啦！',
					icon: 'success',
					duration: 1500
				})
			},
			// 6:性别更新
			radioChange(e) {
				this.form.gender = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
		display: flex;
		flex-direction: column;
		// align-items: center;
	}

	/* 顶部修改修改 */
	.top {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 286rpx;
		background: #00c5a1;
		border-radius: 0 0 20rpx 20rpx;

		.avatar {
			width: 160rpx;
			height: 160rpx;
			// margin-top: 40rpx;
			// margin-bottom: 27rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}

		.editAvatar {
			padding-top: 20rpx;
			line-height: 1;
			font-size: 26rpx;
			color: #fff;
		}
	}

	// 用户信息
	.userInfo {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin: -20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		// width: 670rpx;
		height: 580rpx;

		.uni-form-item {
			display: flex;
			line-height: 46rpx;
			padding: 25rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;

			.left {
				width: 180rpx;
				height: 46rpx;
			}

			.right {
				flex: 1;

				.male {
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.editForm {
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>